<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
    <title>聊天机器人</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <!-- http://api.qingyunke.com/api.php?key=free&appid=0&msg=你好 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            height: 100vh;
            max-width: 750px;
            min-width: 320px;
            margin: 0 auto;
            box-sizing: border-box;
            max-height: 100vh;
        }

        #app {
            height: 100vh;
            flex-direction: column;
            justify-content: space-between;
            background-color: #ecf0f1;
        }

        header {
            height: 8vh;
            background-color: #3b3a3f;
            display: flex;
            justify-content: center;
            align-items: center;
            letter-spacing: 0.2em;
            color: #ffffff;
            font-size: 25px;
        }

        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            /* height: 9vh; */
            background-color: #ebebeb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2vh;
        }

        footer input {
            flex: 5;
            height: 7vh;
            margin-left: 10px;
            border-radius: 48px;
            outline: none;
            font-size: 16px;
            text-indent: 1em;
            outline: none;
            border: 0;

        }

        footer button {
            flex: 1;
            height: 8vh;
            margin-top: 1vh;
            margin-bottom: 1vh;
            border: 0;
            border-radius: 12%;
            margin-left: 10px;
            margin-right: 2px;
            background-color: #42b983;
            font-size: 16px;
            outline: none;
            color: #ebebeb;
        }

        main {
            padding-bottom: 10vh;
            flex: 1;
            display: flex;
            height: 79vh;
            flex-direction: column;
            overflow: hidden;
        }

        main ul {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            margin: 1vh 2vw 0 2vw;
        }

        main ul li {
            margin-top: 1vh;
        }

        main ul .ai {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }

        main ul .ren {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;
            align-items: flex-start;
        }

        main ul .ren .text {
            background-color: #fff;
            margin: 1vh 3vw 1vh 30vw;
            padding: 1.3vh 0;
            padding-left: 4vw;
            padding-right: 4vw;
            border: 1px solid #cccccc;
            border-radius: 4vw;
            word-break: break-all;
        }

        .touxiang {
            height: 7vh;
        }

        .touxiang img {
            height: 80%;
            border: 1px solid #cccccc;
            border-radius: 50%;
        }

        main ul .ai .text {
            background-color: #fff;
            margin: 1vh 30vw 1vh 3vw;
            padding: 1.3vh 0;
            padding-left: 4vw;
            padding-right: 4vw;
            border: 1px solid #cccccc;
            border-radius: 4vw;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <script>
        function opinion(){
			if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                    
			}else {
				alert('sorry!,仅支持移动端！');
                window.opener=null;
                window.open('','_self');
                window.close();
			}
		}
		opinion();
    </script>
    <div id="app">
        <header>聊天机器人</header>
        <main>
            <ul>
                <li class="ai">
                    <span class="touxiang"><img src="img/ai.jpg" alt=""></span>
                    <span class="text">来和我聊天吧~</span>
                </li>

            </ul>
        </main>
        <footer>
            <input type="text" placeholder="和机器人聊聊天吧~" id="ipt"> <button id="btn">发送</button>
        </footer>
    </div>
    <script>
        function fn() {
            let val = $("#ipt").val();
            if (val == "" || val == null) return;
            $("#ipt").val("");
            let li = $(`<li class="ren">
                    <span class="touxiang"><img src="img/me.jpg" alt=""></span>
                    <span class="text">${val}</span>
                </li>
            `)
            $("main ul").append(li);
            $.get("http://api.brhsm.cn/lt.php?msg=" + val, function (data) {
                let text = data.text;
                let li = $(`<li class="ai">
                    <span class="touxiang"><img src="img/ai.jpg" alt=""></span>
                    <span class="text">${text}</span>
                </li>`)
                $("main ul").append(li);
                tobottom();
            })
        }
        $("#btn").on("click", function () {
            fn();
            tobottom();
        })
        $("#ipt").on("keyup", function (e) {
            var e = event || window.event;
            if (e.keyCode == 13) {
                fn();
                tobottom();
            }
        })
        function tobottom() {
            let scrollTop = parseInt($("main ul").get(0).scrollHeight) - parseInt($("main ul").innerHeight());
            if (scrollTop >= 0) {
                $("main ul").animate({ scrollTop: scrollTop + "px" }, 300);

            }
        }
    </script>
</body>

</html>